<template>
	<view class="edit-active-descprit phone-list" :style="'background-color:'+activeDescSkin.bgColor">
		<phoneSimuHead :titleTxt="titleTxt" :isShow="true" class="head-box" ></phoneSimuHead>
		<view class="tit-txt" @click.stop="curEditId=action.editDescrip" :style="'color:' + activeDescSkin.fontColor">
		    <view>{{actTitle}}</view>
			<view class="line" :style="'background-color: '+ activeDescSkin.pageStyle"></view>
		</view>
		<view class="item" :class="{'item-dashed' : curEditId == action.editDescrip}"
				v-for="(item,index) in discript" 
				:key="index" 
				v-show="(item.code != 'info_cpname2' && item.code != 'info_it')
					 || (item.code === 'info_cpname2' && item.iscpname2 == 1)
					 || (item.code === 'info_it' && item.isit == 1)" 
				:style="'color:' + activeDescSkin.fontColor" @click.stop="curEditId=action.editDescrip">
					<view class="i-tit">
						<text class="i-k-bg" :style="'background-color: '+ activeDescSkin.pageStyle"></text>
						<text>{{item.title}}</text>
					</view>
					<text class="i-desc" v-if="item.code == 'info_gd'">{{item.txt}}</text> 
					<view class="i-desc" v-else-if="item.code != 'info_gd' && item.code != 'info_txt'">{{item.txt}}</view>
					<view class="i-desc" v-else-if="item.code == 'info_txt' &&  item.info_txt.type == 1">{{item.info_txt.txt}}</view>
					<view class="i-desc" v-else>
						<view class="txt-pic-box" v-for="(iTxt ,idx) in item.info_txt.txt_arr">
							<view class="txt">{{iTxt.txt}}</view>
							<image class="img" :src="iTxt.img[0].url"></image>
						</view>
					</view>
					<view class="edit-box" v-if="curEditId == action.editDescrip">
						<text class="st-txt" @click.stop="move({act:action.edidDescripTxtMoveUp,index:index,data:item})" v-if="index > 0">上移</text>
						<text class="g-txt" v-if="index > 0">|</text>
						<text class="st-txt" @click.stop="move({act:action.edidDescripTxtMoveDown,index:index,data:item})" v-if="index < discript.length - 1">下移</text>
						<text class="g-txt" v-if="index < discript.length - 1">|</text>
						<text class="st-txt" @click.stop="edit({act:action.edidDescripTxtContext,index:index,data:item})">编辑内容</text>
					</view>
		</view> 
		<view class="bg-s-btn" v-if="curEditId == action.editDescrip" @click="edit({act:action.edidDescripBgStyle,data:activeDescSkin})">编辑样式</view>
		<!-- 编辑背景样式 -->
		<eidtActDesBgSty ref="eidtActDesBgSty" @editDescStyle="editDescStyle"></eidtActDesBgSty>
		<!-- 编辑内容 -->
		<eidtActiveDescContext ref="eidtActiveDescContext" @editContext="editContext"></eidtActiveDescContext>
	</view>
</template>

<script>
	import phoneSimuHead from "@/components/interactive/appComponrnts/phone-simulation-head.vue";
	import editInteractive from "@/js/inieractive/EditInteractive.js";//editInteractiverip.js";
	
	import eidtActDesBgSty from "@/components/interactive/appComponrnts/eidt-active-desc-bg-style.vue";
	
	import eidtActiveDescContext from "@/components/interactive/appComponrnts/eidt-active-desc-context.vue";
	
	export default{
		components:{phoneSimuHead,eidtActDesBgSty,eidtActiveDescContext},
		data(){
			return {
				action:editInteractive.action,
				titleTxt:"",
				actTitle:"活动说明",
				
				curEditId:"",
				
				discript:[
					// {sort:1, title:"活动产品", code:"info_gd", txt:'产品一：标题 1',type:1},//活动产品type=1=默认=txt=产品列表，type=2=自定义=txt=自定义内容
					// {sort:2, title:"活动时间", code:"info_time",txt:'2022-08-23 15:52:56'},//活动时间
					// {sort:3, title:"主办单位", code:"info_cpname",txt:'女人帮.美容养生头疗SPA(朗悦店)'},//主办单位
					// {sort:4, title:"协办单位", code:"info_cpname2",iscpname2:1, txt:'女人帮.美容养生头疗SPA(朗悦店)'},//协办单位,iscpname2=协办单位开关1开2关
					// {sort:5, title:"技术支持", code:"info_it",isit:1,txt:'页面技术由艾蜜云科技提供，技术支持方仅提供页面技术，不承担由活动引起的相关法律责任。'},//技术支持open=开关1开2关，txt=内容，isit值来自：advc.isit
					// {sort:6, title:"活动说明", code:"info_txt",txt:"在秒杀规定的时间内选择产品并支付，支付成功后商家会根据收货地址发货。",type:0,txt_img:[]},//活动说明内容，设置数据来自：base.info_txt
				],
				
				/****活动说明皮肤*****/
				activeDescSkin:
				{
					bgColor:"#FFFFFF", //背景颜色
					fontColor:"#333333", //字体颜色
			        pageStyle:"#F44848", //页面风格
				}
			}
		},
		mounted() {
			uni.$on('init_active_title',(data)=>{
				this.titleTxt = data;
			});
		},
		methods:{
			updateDescript(data)
			{
				this.discript = data;
			},
			edit(data)
			{
				console.log(this.curEditId)
				let act = this.action;
				if(data.act == act.edidDescripBgStyle)
				{
					this.$refs.eidtActDesBgSty.showWin(data);
				}
				else if(data.act == act.edidDescripTxtContext)
				{
					let code = data.data.code;
					if(code== "info_gd")
					{
						this.$refs.eidtActiveDescContext.showWin(data);
					}
					else 
					{
						editInteractive.eidt(data);
					}
				}
			},
			//背景样式
			editDescStyle(data)
			{
				this.activeDescSkin = data.activeDescSkin;
				editInteractive.eidt(data);
			},
			
			updateSkin(data)
			{
				console.log("data========edit-active-des=================:",data);
				this.activeDescSkin = data.color;
			},
			
			//编辑内容
			editContext(data)
			{
				let obj = {};
				obj.act = data.act;
				obj.data= {};
				obj.data.index = data.index;
				obj.data.data = data.data;
				this.discript[data.index] = data.data;
				editInteractive.eidt(data);
			},
			
			/*****移动*****/
			move(data)
			{
			    let act = this.action;
				let curIndex = data.index;
				let nextIndex = -1;
				if(data.act == act.edidDescripTxtMoveUp)
				{
					nextIndex = curIndex - 1;
				}
				else if(data.act == act.edidDescripTxtMoveDown)
				{
					nextIndex = curIndex + 1;
				}
				//先修改排序id
				let sort = this.discript[nextIndex].sort;
				this.discript[nextIndex].sort = this.discript[curIndex].sort;
				this.discript[curIndex].sort = sort;
				//再交换位置
				let temp = this.discript[nextIndex]  ;
				this.discript[nextIndex] = this.discript[curIndex]
				this.discript[curIndex] = temp;
				this.$forceUpdate();
				
				let obj = {};
				obj.act = data.act;
				obj.data = this.discript;
				editInteractive.eidt(obj);
			},
		},
	}
</script>

<style lang="scss">
	
	.edit-active-descprit
	{
		background-color: #FFF;
		height: 100%;
		width: 100%;
		color: #333;
		
		// .head-box
		// {
		// 	position: fixed;
		// 	// top: 0;
		// }
		
		.tit-txt
		{
			border-top: 1upx solid #EEE;
			padding: 20upx 0;
			font-size: 40upx;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			.line
			{
				height: 10upx;
				border-radius:5upx;
				background-color: #F44848;
				width: 160upx;
			}
		}
		.item
		{
			padding: 20upx;
			position: relative;
			cursor: pointer;
			.i-tit
			{
				position: relative;
				font-size: 30upx;
				padding-bottom: 10upx;
				.i-k-bg
				{
					position: absolute;
					height: 36upx;
					width:140upx;
					border-radius: 20upx;
					background: #F44848;
					opacity: .15;
					top : 20upx;
				}
			}
			.edit-box
			{
				position: absolute;
				top:-27px;
				right: 10px;
				background-color: #000;
				color: #FFF;
				padding: 2px 10px;
				border-radius: 4px;
				.g-txt
				{
					padding: 0 10px;
				}
				
				.st-txt
				{
					cursor: pointer;
				}
			}
		}
		
		.item-dashed
		{
			border: 1upx #000 dashed;
		}
		
		.bg-s-btn
		{
			padding: 2px 10px;
			position: absolute;
			top:60px;
			right: 10px;
			background-color: #000;
			color: #FFF;
			border-radius: 4px;
			cursor: pointer;
		}
	}
						
	.i-desc
	{
		width: 100%;
		.txt-pic-box
		{
			width: 100%;
			.txt
			{
				width: 100%;
			}
			.img
			{
				width: 100%;	
			}
		}
	}

</style>